<template>
  <view class="groupMessage">
    <view class="peopleall">
      <view class="people">
        <view v-for="(item,index) in 4" :key="index">
          <view class="hend">
            <image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
            <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
          </view>
          <view class="name">
            隔壁美女小美
          </view>
        </view>
        <image src="../../static/message/add-user.png" mode="" class="img2"></image>
      </view>
      <view class="bottom">
        <view @click="toggle('bottom')">点击查看更多群成员 </view>
        <!-- 查看更多 -->
        <uni-popup ref="popup" background-color="#fff" @change="change" @close='close'>
          <view class="popup-content">
            <view class="search">
              <image src="../../static/resort/search.png" mode="" class="searchimg"></image>
              <view class="text">
                搜索
              </view>
            </view>
            <view class="people people1">
              <view v-for="(item,index) in 29" :key="index">
                <view class="hend">
                  <image src="../../static/resort/video/img1.png" class="img1" mode=""></image>
                  <image src="../../static/message/sex_woman.png" mode="" class="man"></image>
                </view>
                <view class="name">
                  隔壁美女小美
                </view>
              </view>
              <image src="../../static/message/add-user.png" mode="" class="img2" @click="shangxian()"></image>
            </view>
          </view>
        </uni-popup>
        <!-- 查看更多 -->
        <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
      </view>
    </view>
    <!-- 群标签 群公告 备注 -->
    <view class="functionthree">
      <!-- 群聊名称 -->
      <view class="lable" @click="namegai()">
        <view class="left">
          群聊名称
        </view>
        <view class="right">
          <view class="text">
            这是一个群聊
          </view>
          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
      <!-- 群聊名称 -->
      <!-- 群二维码 -->
      <view class="lable">
        <view class="left">
          群标签
        </view>
        <view class="right">
          <view class="text">
            购物 互助
          </view>
          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
      <!-- 群二维码 -->
      <view class="lable" @click="toerweima()">
        <view class="left">
          群二维码
        </view>
        <view class="right">
          <image src="../../static/message/erweima.png" mode=""
            style="width: 40rpx; height: 40rpx; margin-right: 15rpx;"></image>
          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
      <!-- 群公告 -->
      <view class="lable" @click="groupgonggao()">
        <view class="left">
          群公告
        </view>
        <view class="right">

          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
      <!-- 群公告 -->
      <!-- 备注 -->
      <view class="lable" @click="togroupnotes()">
        <view class="left">
          备注
        </view>
        <view class="right">
          <view class="text">
            互助群
          </view>
          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
      <!-- 备注 -->
    </view>
    <!-- 群标签 群公告 备注 -->
    <!-- 聊天记录 -->
    <view class="Chatrecords">
      <view class="lable">
        <view class="left">
          查看聊天记录
        </view>
        <view class="right">
          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
    </view>
    <!-- 聊天记录 -->
    <!-- 群标签 群公告 备注 -->
    <view class="functionthree">
      <!-- 消息免打扰 -->
      <view class="lable">
        <view class="left">
          消息免打扰
        </view>
        <view class="right">
          <u-switch v-model="value" @change="change" activeColor="#FF2A31"></u-switch>
        </view>
      </view>
      <!-- 消息免打扰 -->
      <!-- 置顶聊天 -->
      <view class="lable">
        <view class="left">
          置顶聊天
        </view>
        <view class="right">
          <u-switch v-model="value1" activeColor="#FF2A31"></u-switch>
        </view>
      </view>
      <!-- 置顶聊天 -->
      <!-- 我在群里的昵称 -->
      <view class="lable" @click="groupname()">
        <view class="left">
          我在群里的昵称
        </view>
        <view class="right">
          <view class="text">
            这是一个美女
          </view>
          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
      <!-- 我在群里的昵称 -->
      <!--           投诉 -->
      <view class="lable">
        <view class="left">
          清空聊天记录
        </view>

      </view>
      <!-- 投诉 -->
      <!-- 投诉 -->
      <view class="lable">
        <view class="left">
          投诉
        </view>
        <view class="right">
          <image src="../../static/resort/video/rightjiantou.png" mode="" class="jiantou"></image>
        </view>
      </view>
      <!--投诉 -->
    </view>
    <!-- 群标签 群公告 备注 -->
    <!-- 聊天记录 -->
    <view class="Chatrecords">
      <view class="del">
        删除并退出
      </view>
    </view>
    <!-- 聊天记录 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: true,
        value1: false
      };
    },
    methods: {
      change(e) {
        console.log('change', e);
      },
      change(e) {
        console.log('当前模式：' + e.bottom + ',状态：' + e.show);
      },
      toggle(bottom) {
        this.bottom = bottom
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open(bottom)
      },
      shangxian() {
        uni.showModal({
          title: '人已达上限,无法邀请成员加入',
          confirmText: '我知道了',
          showCancel: false
        })
      },
      close() {
        // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
        // ...
        this.$refs.popup.close()
      },
      namegai() {
        uni.showModal({
          title: '当前社群只仅群主/群管理员可修改社群名称',
          confirmText: '我知道了',
          showCancel: false
        })
      },
      toerweima() {
        uni.navigateTo({
          url: '../message/groupQRCode',
        });
      },
      groupname() {
        uni.navigateTo({
          url: '../message/groupName',
        });
      },
      togroupnotes() {
        uni.navigateTo({
          url: '../message/groupNotes',
        });
      },
      groupgonggao() {
        uni.navigateTo({
          url: '../message/groupAnnouncement',
        });
      }

    }
  }
</script>

<style lang="scss">
  .groupMessage {
    // padding-top: 20rpx;
    // width: 90vw;
    margin: auto;

    .peopleall {
      padding: 5% 5%;
      background-color: #fff;
      margin-bottom: 10rpx;
    }

    .people1 {
      background-color: #fff;
      padding: 5% 5%;
      margin-bottom: 10rpx;
    }

    .people {

      display: flex;
      flex-wrap: wrap;

      .hend {
        margin-right: 15rpx;
        height: 100rpx;
        position: relative;
        margin-bottom: 30rpx;

        .img1 {
          width: 120rpx;
          height: 120rpx;
        }

        .man {
          width: 28rpx;
          height: 28rpx;
          position: absolute;
          top: 95%;
          left: -5%;
        }


      }

      .name {
        // border: 1px solid;
        width: 120rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10rpx;
        text-align: center;
      }

      .img2 {
        width: 120rpx;
        height: 120rpx;
      }


    }

    .bottom {
      margin-top: 20rpx;
      text-align: center;
      // margin: auto;
      justify-content: center;
      color: rgb(150, 150, 150);
      display: flex;
      font-family: Noto Sans SC;
      align-items: center;
      font-size: 14px;

      .jiantou {
        margin-left: 10rpx;
        width: 12rpx;
        height: 24rpx;
      }
    }




    .functionthree {
      padding: 5% 5%;
      background-color: #fff;
      margin-bottom: 10rpx;
    }

    .lable:last-child {
      margin-bottom: 0rpx;
    }

    .lable {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50rpx;

      .left {
        font-size: 30rpx;
      }

      .right {
        display: flex;
        text-align: center;

        .text {
          font-size: 30rpx;
          margin-right: 15rpx;
          color: rgb(150, 150, 150);
          // padding-bottom: 10rpx;
        }

        .jiantou {
          width: 14rpx;
          height: 28rpx;
          margin-top: 10rpx;
        }
      }
    }

    .Chatrecords {
      padding: 5% 5%;
      background-color: #fff;
      margin-bottom: 10rpx;
    }

    .del {
      /* 删除并退出 */
      color: rgb(255, 42, 49);
      font-family: Noto Sans SC;
      font-size: 18px;
      text-align: center;
    }
  }

  .popup-content {
    height: 90vh;
    width: 100vw;
    margin-top: 70rpx;
    background-color: #F5F5F5;

    .search {
      padding: 40rpx 5%;
      margin: auto;
      background-color: #fff;
      display: flex;
      color: rgb(150, 150, 150);
      border-bottom: 2rpx solid #ccc;

      .searchimg {
        width: 32rpx;
        height: 32rpx;
        margin-right: 20rpx;
      }

    }
  }
</style>